<!--场地预约-->
<template>
  <div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="选择球馆" >
        <el-select v-model="arena" clearable placeholder="请选择球馆" size="large">
          <el-option
              v-for="item in ArenaList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-row  :gutter="24">
        <el-col :span="12">
          <el-form-item label="选择球类" type="b">
            <el-select v-model="ball" clearable placeholder="请选择球类" size="large" @change="selectBall(ball)">
              <el-option
                  v-for="item in BallsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择场地" type="b">
            <el-select v-model="site" clearable placeholder="请选择场地" size="large" @change="selectSite(site)" >
              <el-option
                  v-for="item in SiteList"
                  :key="item.courtId"
                  :label="item.courtName"
                  :value="item.courtId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="预约日期"   >
        <el-calendar v-model="date" @input="getLeast" >
          <template #date-cell="{ data }">
            <p :class="findPrevDate(data.day) ? 'is-pervDay' : ''">
              {{ data.day.split('-').slice(2).join('-') }}
            </p>
          </template>

        </el-calendar>
      </el-form-item>
      <el-form-item label="选择时间段">
        <el-radio-group v-model="radio" size="large">
          <el-radio-button label="7:00~12:00" :disabled="least[0] <= 0" >7:00 ~ 12:00 (余{{ least[0] }}人)</el-radio-button>
          <el-radio-button label="13:00~18:00" :disabled="least[1] <= 0" >13:00 ~ 18:00 (余{{ least[1] }}人)</el-radio-button>
          <el-radio-button label="19:00~22:00" :disabled="least[1] <= 0" >13:00 ~ 18:00 (余{{ least[2] }}人)</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="同行人数">
        <el-input-number v-model="peopleNum" size="large" />
        <el-text class="mx-1" type="info">（非会员15/人 &nbsp;&nbsp;&nbsp;月卡12/人&nbsp;&nbsp;&nbsp;季卡10/人&nbsp;&nbsp;&nbsp;年卡8/人）</el-text>
      </el-form-item>
      <el-form-item label="定金">
        <el-text tag="b">非会员:</el-text>&nbsp;&nbsp;&nbsp;<el-text class="mx-1">￥5.00</el-text>&nbsp;&nbsp;<el-text class="mx-1" type="info">（5元/人）</el-text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-text tag="b">会员:</el-text>&nbsp;&nbsp;&nbsp;
        <el-text class="mx-1" tag="del">￥5.00</el-text>&nbsp;&nbsp;<el-text class="mx-1">￥0.00</el-text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-text class="mx-1" type="primary" tag="ins" style="cursor: pointer" @click="toVip" >点击成为会员，免定金！</el-text>
      </el-form-item>
      <el-form-item label="总金额">
        <el-text tag="b" type="danger" style="font-size: 28px">￥{{order+((peopleNum+1) * unitPrice)}}.00</el-text>
      </el-form-item>
      <div class="mx-1" style="display: flex;font-size: 12px;color: #999999;margin-left: 45px;margin-top: -35px;margin-bottom: 35px">（包含定金）</div>
      <el-form-item label="备注">
        <el-input v-model="desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button text @click="centerDialogVisible = true" type="primary"  style="margin-left: 400px">
          预约
        </el-button>
        <el-dialog
            v-model="centerDialogVisible"
            title="预约"
            width="30%"
            align-center
        >
          <div style="margin-left: 100px">
            <p>预约人: {{userName}}</p>
            <p>手机号: {{userCell}}</p>
            <p>预约球馆：{{arena}}</p>
            <p>预约球类：{{ type }}</p>
            <p>预约场地：{{ selectedCourtName }}</p>
            <p>预约时间：2023.8.17 7:00~12:00</p>
            <p>人数：{{peopleNum+1}}人</p>
            <p>备注：{{desc==='' ? '无' : desc}}</p>
            <p>总金额：<el-text tag="b" type="danger" >￥{{order+((peopleNum+1) * unitPrice)}}.00</el-text></p>
          </div>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="VenueScuccess2">
          支付
        </el-button>
      </span>
          </template>
        </el-dialog>


        <el-dialog
            v-model="centerDialogVisible2"
            title="支付定金"
            width="35%"
            height="35%"
            align-center
        >
       <div style="width: 450px;height: 120px ;margin-left: 30px">
          <el-row :gutter="24" >
            <el-col :span="9">
              <img
                  :src="require('@/assets/img/zf_01.jpg')"
                  class="image"
                  style="width:200px;height: 150px"
              />
            </el-col>
            <el-col :span="15">
              <div style="margin-left:40px">
                <span style="font-size: 16px;">请扫码二维码支付<el-text class="mx-1" type="danger">￥{{order}}.00</el-text>元</span>
                <p style="font-size: 24px;margin-left: 3px">5A级球馆欢迎您来~</p>
                <div style="margin-top: 20px">
                  <p style="font-size:10px;margin-left: 3px">剩下金额请预约当天到线下付款，</p>
                  <p style="font-size:10px;margin-left: 3px">预约成功后取消预约订单不退定金！</p>
                </div>


              </div>
            </el-col>
          </el-row>
         </div>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="VenueScuccess">
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue'
import {dayjs} from "element-plus"
import { ElNotification } from 'element-plus'
// import {useRouter} from 'vue-router'
import axios from 'axios';
// const router = useRouter();
export default {
  name: "VenueReservation",
  data() {
    return {
      userName:localStorage.getItem('userAccount'),
      userCell:localStorage.getItem('phoneNumber'),
      userId:localStorage.getItem('userId'),
      unitPrice:15,
      isMember:localStorage.getItem('isMember'),
      least:[100,100,100],
      arena: '',
      ball: '',
      site: '',
      radio: '',
      desc: '',
      order:localStorage.getItem('isMember') === '0' ? 5.00 : 0.00,
      peopleNum: 0,
      venue: 5,
      type:'',
      date: ref(new Date()),
      centerDialogVisible: ref(false),
      centerDialogVisible2: ref(false),
      ArenaList: [
        {
          value: '5A级球馆',
          label: '5A级球馆',
        },
        {
          value: 'ins超火球馆',
          label: 'ins超火球馆',
        },
      ],
      BallsList: [
        {
          value: '4',
          label: '足球',
        },
        {
          value: '3',
          label: '篮球',
        },
        {
          value: '1',
          label: '羽毛球',
        },
        {
          value: '2',
          label: '乒乓球',
        },
      ],
      SiteList: [],
      selectedCourtName:'',

    }
  },
  methods: {
    findPrevDate(day) {
      const today = dayjs().format('YYYY-MM-DD')
      return day < today
    },
    setDisabledDayClass() {
      let disabledDayNode = this.$el.querySelectorAll('td');
      disabledDayNode.forEach(element => {
        if (element.children[0].children[0].className === 'is-pervDay') {
          element.className.includes('is-pervDay') ? element.className += '' : element.className += ' is-pervDay'
        } else {
          element.className = element.className.replace('is-pervDay', '')
        }
      })
    },
    VenueScuccess() {
      this.centerDialogVisible2 = false;
      console.log("userId："+this.userId)
      console.log("日期："+this.date)
      console.log("定金："+this.order)
      console.log("单价："+this.unitPrice)
      console.log("least："+this.least)
      console.log("时间段："+this.radio)
      const newDate = dayjs(this.date).format('YYYY-MM-DD');
      const data = {
        userId: this.userId,
        courtId: this.site,
        reservationDate: newDate,
        reservationTimeSlot: this.radio,
        reservationDeposit: this.order,
        reservationNum: this.peopleNum
      };
      axios
          .post('http://39.101.75.128:8080/system/reservations', data)
          .then((response) => {
            if (response.data.code == 200) {
              ElNotification({
                title: '预约',
                message: '预约成功',
                type: 'success',
              })
            } else {
              // 登录失败，提示错误信息
              console.log("预约失败")
              this.$message.error(response.data.msg);
            }
          })
          .catch((error) => {
            // 处理请求失败的情况
            console.log(error);
          });

    },
    VenueScuccess2() {
      this.centerDialogVisible = false;
      this.centerDialogVisible2 = true;
    },
    toVip() {
      // router.push({
      //   path: '/memberRecharge'
      // })
      this.$router.push('/memberRecharge');
    },
    selectBall(ball) {
      if(ball == 1){
        this.type = '羽毛球'
      }else if (ball == 2){
        this.type = '乒乓球'
      }else if(ball == 3){
        this.type = '蓝球'
      }else{
        this.type = '足球'
      }
      axios.get('http://39.101.75.128:8080/system/court/selectListByCourtType', {
        params: {
          courtType: ball
        }
      })
          .then(response => {
            if (response.data.code == 200) {
              console.log(response.data)
              this.SiteList = response.data.rows;

            } else {
              // 登录失败，提示错误信息
              console.log("失败")
              this.$message.error(response.data.msg);
            }
          })
          .catch(error => {
            console.error(error);
          });
    },
    selectSite(site) {
      const selectedSite = this.SiteList.find(item => item.courtId === site);
      this.selectedCourtName = selectedSite ? selectedSite.courtName : '';
      console.log("ismember:",this.isMember )
      console.log(this.isMember == 1)
      if(this.isMember == 1){
        this.unitPrice = 12
      }else if(this.isMember == 2){
        this.unitPrice = 10
      }
      else if(this.isMember == 3){
        this.unitPrice = 8
      }
      else
      {
        this.unitPrice = 15
      }
    },
    getLeast(){
      const newDate = dayjs(this.date).format('YYYY-MM-DD');
      axios.get('http://39.101.75.128:8080/system/reservations/remainCapacity', {
        params: {
          reservationDate: newDate.toString(),
          courtId: this.site.toString()
        }
      })
          .then(response => {
            if (response.data.code == 200) {
              console.log(response.data);
              console.log("least11:", response.data.data);
              this.least = response.data.data;
            } else {
              console.log("时间段失败");
              this.$message.error(response.data.msg);
            }
          })
          .catch(error => {
            console.error(error);
          });
    }

}}
</script>
<script setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

</script>
<style scoped>
.el-form-item{
  margin-bottom: 30px;
}
.el-form-item__label{
  font-size: 18px;
  font-weight: bold;
}
.is-pervDay {
  color: #a8abb2;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
}
el-radio-button{
  padding: 8px;
}

</style>
